<script>
    $(document).ready(function () {
        $('#formulario').validate({
            rules: {
                bairros_descricao: {
                    required: true,
                    minlength: 3
                },
                bairros_uf: {
                    required: true,                    
                },
                bairros_cidade: {
                    required: true,                    
                }
            },
            messages: {
                bairros_descricao: {
                    required: "Informe a Descrição do bairro.",
                    minlength: "Descrição inválida."
                },
                bairros_uf: {
                    required: "Informe o Estado."
                },
                bairros_cidade: {
                    required: "Informe a Cidade."
                    
                }
            }
        });
    });
</script>

<body>
    <form name="formulario" id="formulario" action="<?php echo base_url('index.php/bairros/salvar/') ?>" method="post">
        <?php if (isset($bairros_id)) { ?> 
            <input type="hidden" name="bairros_id" value="<?php echo $bairros_id; ?>">              
        <?php } ?> 
        <div class="row">
            <div class="large-8 columns" style="left: 181px;">
                <h1>
                    <small><i class="fi-list-bullet" style="font-size: 35px; padding-right: 10px; margin-left: 5px;"></i><span style="vertical-align: 6px;">Cadastro de Bairros</span>  </small>
                </h1>
            </div>                
        </div>
        <br />
        <div class="row">
            <div class="small-8 columns" style="left: 181px">
                <label>Descrição
                    <input type="text" name="bairros_descricao" id="bairros_descricao" value="<?php echo isset($bairros->bairros_descricao) ? $bairros->bairros_descricao : ''; ?>"  placeholder=""  />
                </label>
            </div>
        </div>
        <div class="row">
            <div class="small-4 columns" style="left: 181px">
                <label>Estado
                    <select name="bairros_uf" id="bairros_uf" class="ajax-uf">
                        <option value="">--Selecione--</option>
                        <?php
                        $objPessoa = new Pessoas_Model();
                        $ufs = $objPessoa->getUf();
                        foreach ($ufs as $uf) {
                            ?>
                            <option 
                            <?php
                            if (isset($bairros_id)) {
                                if ($uf->uf_id == $bairros->uf_id) {
                                    echo "selected=selected";
                                }
                            }
                            ?>
                                value="<?php echo $uf->uf_id ?>"><?php echo $uf->uf_descricao ?></option>                            
                        <?php } ?>
                    </select>
                </label>                            </div>                
            <div class="small-4 columns" style="right: 152px">
                <label>Cidade
                    <select name="bairros_cidade" id="bairros_cidade" disabled="disabled" class="recebe-cidade">
                        <option value=""></option>
                    </select>
                </label>                
            </div>                
        </div>                   
        <div class="row"> 
            <div style="width: 667px; margin-top: 20px; margin-left: 195px;"> 
                <input type="submit" class="button small success radius" id="btSalvar" value="Cadastrar"/> 
                <?php if (isset($bairros)) { ?>
                    <script>
                        document.getElementById("btSalvar").value = "Alterar";
                    </script>
                    <input type="button"  data-reveal-id="firstModal" class="button small alert radius" value="Excluir"/> 
                <?php } ?> 
            </div> 
        </div>
        <div id="firstModal" class="reveal-modal tiny" data-reveal>            
            <center><p>Confirma a exclusão deste bairro ?</p> <br></center>
            <center><input type="submit" class="button alert small radius" value="Confirmar" onclick="excluir()"/></center>
            <a class="close-reveal-modal">&#215;</a>
        </div>  

    </form> 
</body>

<script>
    
    function excluir(){
        document.formulario.action = "<?php echo base_url('index.php/bairros/excluir/') ?>";
        document.formulario.submit();;
    }
    
    $(document).ready(function () {
        $(document).foundation();
    });

    $(".ajax-uf").change(function () {
       
       seleciona_cidade($(this).val());

    });


    function seleciona_cidade(estado_id) {

        var estado_id = estado_id;
        $(".recebe-cidade").html("<option value=''>Aguarde...</option>");
        $.ajax({
            url: '<?php echo base_url('index.php/cidades/buscaCidades') ?>',
            type: 'POST',
            data: {estado_id: estado_id},
            dataType: 'json',
            success: function (cidadesJson) {
                var txt_cidades = "<option value=''>--Selecione a cidade--</option>";
                $.each(cidadesJson, function (index, cidade) {
                    txt_cidades += "<option value='" + cidade.cidades_id + "'>" + cidade.cidades_descricao + "</option>";
                });
                $(".recebe-cidade").html(txt_cidades);
                $(".recebe-cidade").removeAttr("disabled");

                <?php
                    if (isset($_GET['bairros_id'])) {
                ?>

                    var val = '<?php echo $bairros->cidades_descricao ?>';
                    $('#bairros_cidade option:contains(' + val + ')').prop({selected: true});
                <?php
                    }
                ?>
            }
        });

    }
    
    
</script>
<?php
if (isset($_GET['bairros_id'])) {
    ?>
    <script>
        seleciona_cidade(<?php echo $bairros->uf_id ?>);
    </script>
    <?php
}
?>
